*{
    margin: 0;
    padding: 0;
}

#div1{
    margin-bottom: 20px;
    width: 400px;
    height: 400px;
    background: #0cc;

    transition: all 1s;
}

#div1:hover{
    width: 800px;
    background: #c00;
}

#div2{
    margin-bottom: 20px;
    width: 400px;
    height: 400px;
    background: #0cc;

    transition: 2s ease 1s;
}

#div3{
    margin: auto;
    margin-bottom: 20px;
    width: 400px;
    height: 400px;
    background: url('../img/slide-1.jpg') ;
    background-size: cover;

    transition: all 0.5s;
}
#div3:hover{
    width: 690px;

}

#div4{
    margin: auto;
    margin-bottom: 20px;
    width: 400px;
    height: 400px;
    background: url('../img/slide-1.jpg') ;
    background-size: cover;

    transition: all 0.5s;
}
#div4:hover{
    transform: translate(50px,50px);
}
